<template>
  <el-drawer
    :title="this.$t('titles.map')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="mappingBox"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer"
    >

    <div class="flex skip" @click="skipGuide" v-show="!closable">
        <el-button type="primary" size="mini">跳过</el-button>
    </div>

    <div v-show="!closable">
      <previous :param="name"></previous>
      <next :param="name"></next>
    </div>
    
    <div class="authorCom">
      <div v-if="mappingEnd">
        <div class="editItem flex">
          <el-button native-type="button" class="editMapBtn" @click="newMappingBtn">新建地图</el-button>
        </div>
        <div class="editItem flex">
          <el-button native-type="button" class="editMapBtn" @click="continueMappingBtn">继续建图</el-button>
        </div>
      </div>
      <div v-else>
        <div class="tipBox">
          <p>请缓慢移动机器人增加地图数据，建图完成后先点击<span>“保存地图”</span>再点击<span>“关闭建图”</span></p>
          <p>建图结束之后请重启程序/小车</p>
        </div>
        <div class=" flex" v-show="this.$store.state.userRole === 'developer'">
          <el-input :placeholder="this.$t('placeholder.mapName')" v-model="mapName" class="mapNameInp" size="medium" clearable></el-input>
        </div>
        <div class="editItem flex">
          <el-button native-type="button" class="editMapBtn" @click="saveMapContinue">{{this.$t("buttons.SaveAndContinue")}}</el-button>
        </div>
        <div class="editItem flex">
          <el-button native-type="button" class="editMapBtn" @click="saveMapClose">{{ this.$t("buttons.SaveAndClose")}}</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import next from "./guide/next.vue"
import previous from "./guide/previous.vue"
import { closeGuide } from "../js/methods"
import { newMapping, continueMapping, submitSaveMapContinue, submitSaveMapBtn } from "../js/map";
export default {
  name: "mapping",
  components: {
    next,
    previous
  },
  data() {
    return {
      drawer: this.$store.state.edipMapModule,
      direction: 'btt',
      closable: false,
      showClose: false,
      mapName: null,
      mappingEnd: true,
      name: "map"
    };
  },
  mounted(){
    let guide = window.localStorage.getItem("guide");
    if(guide){
      // this.closable = true;
    }
  },

  methods: {
    //跳过引导
    skipGuide(){
      this.drawer = false;
        closeGuide();
    },

    //新建地图
    newMappingBtn: function(){
      newMapping();
      this.mappingEnd = false;
    },

    //继续建图
    continueMappingBtn: function(){
      continueMapping();
      this.mappingEnd = false;
    },

    //保存并继续建图
    saveMapContinue: function() {
      let that = this;
      submitSaveMapContinue(this.mapName);
    },

    //点击提交
    saveMapClose: function() {
      let that = this;
      submitSaveMapBtn(that.mapName);
    },

    //关闭模态框
    closeDrawer: function(){
      this.$store.commit("switchEditMapBtns", false);
      this.mappingEnd = true;
    }
  },

  //属性监听
  watch:{
      "$store.state.edipMapModule": function(val){
          this.drawer = val;
      },

      "$store.state.guideModule": function(val){
        if(!val){
          // this.closable = true;
        }
      }
  }
};
</script>

<style scoped lang="less">
 .skip{
    position: absolute;
    color: #409EFF;
    top: -100px;
    right: 15px;
 }
.authorCom {
  width: 100%;
  padding: 0 15px;
  .tipBox{
    position: fixed;
    width: 100%;
    padding: 20px;
    text-align: left;
    color: #ffffff;
    top: 30%;
    left: 0;
    font-size: 16px;
    span{
      color: #409eff;
    }
  }
  button {
    background: none;
    color: #ffffff;
  }
  .editItem {
    flex: 1;
    background-color: #409eff;
    color: #ffffff;
    border-radius: 4px;
    height: 35px;
    line-height: 35px;
    margin-top: 20px;
    .editMapBtn {
      width: 100%;
      border: none;
      padding: 0;
    }
  }
  .mapNameInp {
   height: 35px;
    line-height: 35px;
  }
}
</style>